<%@page pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>数据融合平台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/font.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/xadmin.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/echarts.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    .xz{
        width: 100%;
        height: 1150px;
        background: #E0E0E0;
         border-radius: 20px 20px 0 0 ;
    }
    .xz .bt{
        width: 100%;
        height: 50px;
        background: #28495a;
        border-radius: 20px 20px 0 0 ;
        padding-top: 10px;
        float: left;
        color:#FFF;
    }
    .btleft{
        width:50%;
        height: 40px;
        /* margin-left: 30%; */
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        float: left;
    }
    .btright{
        width:50%;
        height: 40px;
        margin-left: 0%;
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        float: left;
    }
    .bt select{
        margin-top: -10px;
        height: 30px;
    }
    .first select{
        margin-top: -8px;
        height: 30px;
        font-weight: normal;
    }
    .two{
      width: 100%;
      float: left;
    }
    .three{
       width: 80%;
       float: left;
       margin-bottom: 0px;
       margin-left:10%;
       margin-top:20px;
    }
    .clubsweek{
        margin-top:60px;width: 40%;height:400px; background: red; float: left;
    }
    #scid{
        width: 70%;
        float: left;
        height: 30px;
    }
    .sreach{
        height: 30px;
        margin-top: -15px;
    }
    </style>
  </head>
  
  <body class="layui-anim layui-anim-up">
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">学生数据</a>
        <a>
          <cite>学生个人数据</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      <div class="xz">
          <div class="bt">          
              <div class="btleft">
              学年
                <div class="layui-input-inline">
                  <select name="province" lay-filter="province" id="year">
                    <option value="">选择学年</option>
                    <c:forEach items="${yearList}" var="year">
                    	<option value="${year }">${year }</option>
                    </c:forEach> 
                  </select>
                </div>
              </div>
              <div class="btright">
                <div class="layui-input-inline">
                    <input class="layui-input" placeholder="学号" name="scid" id="scid">
                    <button class="layui-btn sreach"  lay-submit="" lay-filter="sreach" id="oBtn"><i class="layui-icon">&#xe615;</i></button>
                </div> 
              </div>

          </div>
          <div class="two">
            <div id="peoplefirst" style="margin-top:20px;width: 50%;height:280px; float: left;"></div>  
            <div id="peoplejb" style="margin-top:20px;width: 50%;height:280px; float: left;"></div> 
          </div>
          <div class="two">
            <div id="peoplejbsx" style="margin-top:20px;width: 100%;height:400px; float: left;"></div>  
          </div>
          <div class="three">
		      <table class="layui-table" id="tables">
		        <thead>
		          <tr>
		            <th>学生学号</th>
		            <th>学生姓名</th>
		            <th>性别</th>
		            <th>体测项目</th>
		            <th>数据记录</th>
		            <th>成绩</th>
		        </thead>
		        <tbody id="tbodys">
		          <tr>
					<td style="border-color:#FFF;">无数据</td>
		          </tr>
		        </tbody>
		      </table>
          </div>
      </div>

    </div>
    <script>   
    	var peoplejbsx = echarts.init(document.getElementById('peoplejbsx'));
        var peoplefirst = echarts.init(document.getElementById('peoplefirst'));
        var peoplejb= echarts.init(document.getElementById('peoplejb'));
        peoplefirst.setOption({
    	    title : {
    	        text: '体育项目签到次数',
    	         x:'center'
    	    },
    	    tooltip : {
    	        trigger: 'axis'
    	    },
    	    color:["#28495a"],
    	    grid:{
/*     	        x:40,
    	        y:40,
    	        x2:70,
    	        borderWidth:1 */
    	    },
    	    legend: {
    	        x:70,
    	        y:5,
    	    },
    	    calculable : true,
    	    xAxis : [
    	        {
    	            type : 'category',
    	            data :[],
    	        }
    	    ],
    	    yAxis : [
    	        {
    	            type : 'value',
    	            name:'次数',
    	        }
    	    ],
    	    series : [
    	    ]
      });   
        //图表实现
        var oBtns=document.getElementById("oBtn");
        oBtns.onclick=function(){
        	year=$("#year").val();
        	if(year==null||year==''){
        		var years="2017";
        	}else{
        		var years=year.substr(0, 4);
        	}
        	var studentId=document.getElementById("scid").value;
        	$.ajax({
        		url:"<%=request.getContextPath()%>/stamina/getMarkList",
        		type:"get",
        		data:{"year":years,"studentNo":studentId},
        		dataType:"json",
        		async:false,
        		success:function(result) {
        			if(result.status!=-1){
            			console.log(result);
            			$("#tables tbody").html("");//删除table中body内容
            			var s = '';
    					for(var i=0;i<result.items.length;i++){
    						s += '<tr><td>' +result.studentNo + '</td><td>' + result.stuName + '</td><td>' +result.sex + '</td><td>'+result.items[i].projectName+'</td><td>'+result.items[i].mark+'</td><td>'+result.items[i].level+'</td></tr>'; 	 
    					}
    					$('#tbodys').append(s);        				
        			}
				},
				error:function() {
    	            layer.alert('查询失败!该学号不存在！',{
    	                icon:5});    
				}
        	});
        	tykqd(years,studentId);
        }  
 function tykqd(year,studentNo){
	$.ajax({
		url:"<%=request.getContextPath()%>/student/getSignSecondNum",
		type:"get",
		data:{"year":year,"studentNo":studentNo},
		dataType:"json",
		async:false,
		success:function(result) {
		 	var xdata=[];
			var seriesdata=[];
			console.log(result);
			for(var i=0;i<result.length;i++){
	        	xdata[i]=result[i].month;
	        	seriesdata[i]=result[i].value;        				
			}
			//console.log(seriesdata);
			  peoplefirst.setOption({
		    	    xAxis : [
		    	        {
		    	            type : 'category',
		    	            data :xdata,
		    	        }
		    	    ],
		    	    series : [
		    	        {
		    	            type:'line', 
		    	            data:seriesdata,
		    	        },
		    	    ]
			  });        			
		},
		error:function() {
            layer.alert('体育项目累计签到次数查询失败!',{
                icon:5});    
		}
	});  
 }
 tykqd();//调用实现体育项目签到次数查询的函数
 peoplejb.setOption({
    title : {
        text: '健步运动次数',
         x:'center'
    },
    tooltip : {
        trigger: 'axis'
    },
    color:['#9bcd38'],
    grid:{
        x:40,
        y:40,
        x2:70,
        borderWidth:1
    },
    legend: {
        x:70,
        y:5,
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月'],
        }
    ],
    yAxis : [
        {
            type : 'value',
            name:'次数',
        }
    ],
    series : [
        {
            type:'line',
            data:[8, 18, 28, 35, 46, 58],
        },
    ]
  });

  peoplejbsx.setOption(
        {
            title : {
                text: '个人健步数据',
                 x:'center'
            },
            tooltip : {
                formatter: "{a} <br/>{c} {b}"
            },
            series : [
                {
                    name:'总里程',
                    type:'gauge',
                    min:0,
                    max:220,
                    splitNumber:11,
                    radius: '70%',
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.09, '#1e90ff'],[0.82, '#1e90ff'],[1, '#1e90ff']],
                            width: 3,
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length :8,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowBlur: 10
                        }
                    },
                    splitLine: {           // 分隔线
                        length :18,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width:3,
                            color: '#1e90ff',
                            shadowColor : '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width:5,
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title : {
                        textStyle: {
                            fontWeight: 'bolder',
                            fontSize: 20,
                            fontStyle: 'italic',
                            shadowBlur: 10
                        }
                    },
                    data:[{value: 40, name: 'km'}]
                },
                {
                    name:'平均配速',
                    type:'gauge',
                    center : ['34%', '55%'],    // 默认全局居中
                    radius : '60%',
                    min:0,
                    max:30,
                    endAngle:49,
                    splitNumber:10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.29, 'lime'],[0.86, 'lime'],[1, 'lime']],
                            width: 2,
                        }
                    },
                    axisLabel: {            // 坐标轴小标记
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length :8,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowBlur: 10
                        }
                    },
                    splitLine: {           // 分隔线
                        length :18,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width:3,
                            color: 'lime',
                            shadowColor : '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width:5,
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title : {
                        offsetCenter: [0, '-30%'],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontStyle: 'italic',
                            color: 'lime',
                            shadowColor : '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    detail : {
                        shadowBlur: 5,
                        width: 80,
                        height:30,
                        offsetCenter: [5, '20%'],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            color: 'lime'
                        }
                    },
                    data:[{value: 25, name: 'min/km'}]
                },
                {
                    name:'平均时长',
                    type:'gauge',
                    center : ['70%', '55%'],    // 默认全局居中
                    radius : '60%',
                    min:0,
                    max:90,
                    startAngle:155,
                    endAngle:-40,
                    splitNumber:10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.29, '#63869e'],[0.86, '#63869e'],[1, '#63869e']],
                            width: 2,
                        }
                    },
                    axisLabel: {            // 坐标轴小标记
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length :8,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowBlur: 10
                        }
                    },
                    splitLine: {           // 分隔线
                        length :18,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width:3,
                            color: '#63869e',
                            shadowColor : '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width:5,
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title : {
                        offsetCenter: [0, '-30%'],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontStyle: 'italic',
                            color: '#63869e',
                            shadowColor : '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    detail : {
                        shadowBlur: 5,
                        width: 80,
                        height:30,
                        offsetCenter: [5, '20%'],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            color: '#63869e'
                        }
                    },
                    data:[{value: 10, name: 'min'}]
                },
            ]
        }
    );
    </script>
  </body>

</html>